<template>
  <div class="app-container home">
    <div style="text-align: center">
      目前属于测试阶段，请核对查询结果；<br />月度新浆员、袋数、召回按照“宣传员”关系查询；<br />年度袋数按照“备注”查询
    </div>
    <el-row :gutter="10">
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix" style="text-align: center;">
              <span
                >当月袋数：{{ task_indicators_statistics.当月献浆总袋数 }}</span
              >
            </div>
            <div class="text item">
              <el-statistic
                :value="task_indicators.taskTongqi"
                title="同期任务"
              ></el-statistic>
              <el-statistic
                :value="task_indicators.taskMubiao"
                title="目标任务"
              ></el-statistic>
              <el-statistic
                :value="task_indicators.taskTiaozhan"
                title="挑战任务"
              ></el-statistic>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
              <span>召回</span>
            </div>
            <div class="text item">
              <el-statistic
                :value="task_indicators_statistics.本月召回数量"
                title="本月召回数量"
              ></el-statistic>
              <el-statistic
                :value="task_indicators_statistics.本季度召回数量"
                title="本季度召回数量"
              ></el-statistic>
              <el-statistic
                :value="
                  (task_indicators.同期季度检疫期数量 != null && task_indicators.同期季度超半年数量 != null ) ? (task_indicators.同期季度检疫期数量 +
                  task_indicators.同期季度超半年数量) : null
                "
                title="同期季度召回数量"
              ></el-statistic>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix" style="text-align: center;">
              <span>当月新浆员数</span>
            </div>
            <div class="text item" style="text-align: center;">
              {{ task_indicators_statistics.当月新浆员数 }}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
              <span>频次</span>
            </div>
            <div class="text item">
              <el-statistic
                :value="task_indicators_statistics.频次"
                title="我的频次"
              ></el-statistic>
              <el-statistic
                :value="task_indicators_statistics.当年浆站频次"
                title="浆站总频次"
              ></el-statistic>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
              <span>留存率</span>
            </div>
            <div class="text item">
              <el-statistic
                :value="task_indicators_statistics.留存率"
                title="我的留存率"
              ></el-statistic>
              <el-statistic
                :value="task_indicators_statistics.浆站留存率"
                title="浆站留存率"
              ></el-statistic>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="4" :lg="4" :xl="3" class="box-item">
        <div class="grid-content bg-purple">
          <el-card class="box-card" v-loading="loading">
            <div slot="header" class="clearfix">
              <span>一次率</span>
            </div>
            <div class="text item">
              <el-statistic
                :value="task_indicators_statistics.当年一次率"
                title="我的一次率"
              ></el-statistic>
              <el-statistic
                :value="task_indicators_statistics.浆站一次率"
                title="浆站一次率"
              ></el-statistic>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  userPlasmaTaskIndicatorsRemark,
  userPlasmaTaskIndicatorsXuanchuanyuan,
} from "@/api/plasma";
export default {
  name: "indicators",
  data() {
    return {
      task_indicators: {
        jidu: null,
        year: null,
        taskTiaozhan: null,
        tongqiCountXin: null,
        userId: null,
        nowCountJianyiqi: null,
        preYearDaishu: null,
        taskTongqi: null,
        当年季度超半年数量: null,
        同期季度超半年数量: null,
        month: null,
        name: null,
        taskMubiao: null,
        tongqiCountJianyiqi: null,
        tongqiCountChaobannian: null,
        当年季度检疫期数量: null,
        nowCountChaobannian: null,
        id: null,
        同期季度检疫期数量: null,
        plasmaCount: null,
        nowCountXin: null,
      },
      task_indicators_statistics: {
        当月献浆总人数: null,
        当年浆站献浆总袋数: null,
        浆站上年献浆总人数: null,
        当年献浆一次人数: null,
        当年新浆员数: null,
        当年一次率: null,
        备注: null,
        当月新浆员数: null,
        当年浆站新浆员一次率: null,
        留存率: null,
        上年献浆总人数: null,
        当年浆站频次: null,
        当月浆站献浆总人数: null,
        当年浆站献浆总人数: null,
        当年献浆总袋数: null,
        当年浆站新浆员献浆一次人数: null,
        当月献浆总袋数: null,
        当年浆站献浆一次人数: null,
        频次: null,
        本年召回数量: null,
        当年新浆员一次率: null,
        当月浆站献浆总袋数: null,
        当年献浆总人数: null,
        当年浆站新浆员数: null,
        浆站留存率: null,
        当年新浆员献浆一次人数: null,
        浆站一次率: null,
        本月召回数量: null,
        本季度召回数量: null,
        召回: null,
      },
      loading: true,
    };
  },
  created() {
    this.loading = true;
    userPlasmaTaskIndicatorsXuanchuanyuan().then((res) => {
      this.task_indicators = res.data.task_indicators;
      this.task_indicators_statistics = res.data.task_indicators_statistics;
      console.log(res);
      this.loading = false;
    });
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.home {
  .box-item{
    margin-top:10px
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
<style>
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
